<!-- 表单设计头部 -->
<template>
  <div class="set-up-form-header">
    <!-- <a-space class="space">
      <icon-arrow-left :size="32" @click="back" />
      <span v-if="!isEdit">未命名的表单</span>
      <a-input v-else placeholder="请输入表单名称"></a-input>
      <icon-edit :size="32" @click="edit" />
    </a-space> -->
    <a-tabs lazy-load default-active-key="2">
      <a-tab-pane key="1" title="1 表单设计"> </a-tab-pane>
      <a-tab-pane key="2" title="2 打印配置"> </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 返回按钮
const back = () => router.back();
let isEdit = ref(false); // 判断是否点击了编辑按钮

//编辑按钮
const edit = () => {
  isEdit.value = !isEdit.value;
};
</script>

<style scoped lang="less">
.set-up-form-header {
  // height: 50px;
  // width: 100%;
  // background-color: #4e7cf7;
  // line-height: 50px;
  // color: #fff;
  // font-size: 16px;

  :deep(.arco-tabs-nav-tab) {
    background-color: #4e7cf7;
    height: 50px;
    width: 100%;
    line-height: 50px;
  }
  :deep(.arco-tabs-nav-tab-list) {
    left: 50%;
    transform: translateX(-50%) !important;
  }
  :deep(.arco-tabs-nav-type-line .arco-tabs-tab) {
    color: #fff;
  }
  :deep(.arco-tabs-tab-active, .arco-tabs-tab-active:hover) {
    background-color: #2a64f6;
  }

  .space {
    vertical-align: middle;
    position: absolute;
    .btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      :deep(.arco-btn-text) {
        color: #fff;
        height: 50px;
      }
      :deep(.arco-btn-text:hover),
      :deep(.arco-btn-text:active) {
        background-color: #2a64f6;
      }
    }
  }
}
</style>
